<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理
            <small>检查项管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>检查项管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="项目编码/项目名称" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item"></el-input>
                <!--  这里要设置 分别两个不同的查询的ID  区别于 分页查询 的方法，避免每次查询 都是从第一页进行查询-->
                <el-button @click="findPageByCondition" class="dalfBut">查询</el-button>
                <!--  当点击  新建  时，出发 handleCreate 点击事件，将 dialogFormVisible 表单项的属性改为：true 表单可见-->
                <el-button type="primary" class="butT" @click="handleCreate">新建</el-button>
            </div>
            <!--  :data="dataList"  表示将数据源 封装到 dataList中  dataList就是一个数据源对象 -->
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="code" label="项目编码" align="center"></el-table-column>
                <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
                <el-table-column label="适用性别" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="适用年龄" align="center"></el-table-column>
                <el-table-column prop="remark" label="项目说明" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!--            分页栏     pagination-container ：分页容器     -->

            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

            <!--   新增标签弹层    -->
            <div class="add-form">
                <!--   dialogFormVisible： 默认窗体是false 关闭的，当点击窗口后 添加点击事件，将属性值改为 true 弹开   -->
                <el-dialog title="新增检查项" :visible.sync="dialogFormVisible">
                    <!-- :model="formData"  操作表单数据的    :rules="rules"   rules 规则，这里表示校验的规则 -->
                    <!--        -->
                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <!-- 这里是表单遍历之后的到的数据  其中 prop： 表示需要校验的选项，
                                                        被prop赋值的属性，就需要遵循校验的规则-->
                                <!--  在  data(){  rules: {//校验规则}  }  中 有两个属性 code/name  分别定义了 校验的属性-->
                                <el-form-item label="项目编码" prop="code">
                                    <!-- 我们表单中 所有的数据都是 formData. ，所以我们后期直接提交 formData. 就可以了
                                                    formData.  表示从formData 中调用数据-->
                                    <el-input v-model="formData.code" /> <!--  disable： 属性不可更改   -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <!--  这里prop="name"  其中的name 可以在rules: {//校验规则}  中自定义 -->
                                <el-form-item label="项目名称" prop="name">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <!--  这里 如果  label="性别"  需要进行校验，则 添加prop="" 属性即可-->
                                <el-form-item label="性别">
                                    <el-select v-model="formData.sex">
                                        <el-option label="不限" value="0"></el-option>
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="适用年龄">
                                    <el-input v-model="formData.age"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="类型">
                                    <el-select v-model="formData.type">
                                        <el-option label="检查" value="1"></el-option>
                                        <el-option label="检验" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="价格">
                                    <el-input v-model="formData.price"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="项目说明">
                                    <el-input v-model="formData.remark" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="注意事项">
                                    <el-input v-model="formData.attention" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <!--  @click="dialogFormVisible = false"  dialogFormVisible：对话框可见
                                            点击取消 触发点击事件， 关闭窗口-->
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <!-- 点击确定之后 触发  @click="handleAdd"  函数，进行表单校验 然后发送 请求访问后台数据，实现功能  -->
                        <el-button type="primary" @click="handleAdd">确定</el-button>
                    </div>
                </el-dialog>
            </div>

            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="项目编码" prop="code">
                                    <el-input v-model="formData.code" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="项目名称" prop="name">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别">
                                    <el-select v-model="formData.sex">
                                        <el-option label="不限" value="0"></el-option>
                                        <el-option label="男" value="1"></el-option>
                                        <el-option label="女" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="适用年龄">
                                    <el-input v-model="formData.age"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="类型">
                                    <el-select v-model="formData.type">
                                        <el-option label="检查" value="1"></el-option>
                                        <el-option label="检验" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="价格">
                                    <el-input v-model="formData.price"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="项目说明">
                                    <el-input v-model="formData.remark" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="注意事项">
                                    <el-input v-model="formData.attention" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            dataList: [],//当前页要展示的分页列表数据
            formData: //表单数据  因为表单中是 formData.的形式 获取数据，
            // 所以这里需要定义 formData.属性 的值  例如： 属性："xxx"
                {},
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            rules: {//校验规则
                code: [
                    {required: true, message: '项目编码为必填项', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '项目名称为必填项', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur'}
                ]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage()
        },
        methods: {
            //编辑   编辑  在后台sql中 执行的是更新的操作
            handleEdit() {
                //先判断  $refs 里面的数据 是否规范 合法
                this.$refs['dataEditForm'].validate((valid)=>{
                    //如果合法 就发送 axios 请求
                    if(valid){
                        //  this.formData： 将表单的所有数据 传入到后台   然后在 最后 后台给出响应
                        axios.post("/checkitem/edit.do",this.formData).then((res)=>{

                            if(res.data.flag){
                                this.$message.success(res.data.message)
                                //  编辑成功
                                this.pagination.currentPage=1
                                this.findPage()
                            }else{
                                this.$message.error(res.data.message)
                            }
                            this.dialogFormVisible4Edit=false
                        })
                    }else{
                        this.$message.error("数据非法")
                        return false;
                    }
                })
            },

            handleAdd() {
                /*添加 handleAdd 是一个在from表单中 触发 点击事件的 确定按钮
                       所以 在点击确定时： 1. 校验表单  合法 就提交表单
                                           2. 表单数据以ajax 提交给后台
                                           3.  关闭窗口对话空，给用户提示
               refs: 判断 [' '] 数组对象  validate ：验证  valid  ：true/false              */
                // 这里的 $refs[]  表示判断的是  ref 中的数据     ref="dataEditForm"
                this.$refs['dataAddForm'].validate((valid) => {
                    //等于说，这里 是做一个 数据数组对象的值 进行判断  然后封装给 handleAdd事件对象所在的  “确定” 按钮
                    // 如果判断为 true 则进行表单数据的提交，发送ajax请求 访问后台数据/ false 则提示客户 数据不合法，关闭对话框
                    if (valid) {
                        //发送一个 post 请求 ，"/checkitem/add.do" 地址 / 传入 this.formData ： 表单数据 参数 / then： 然后
                        axios.post("/checkitem/add.do", this.formData).then((res) => {
                            //console.info(res)：  在后台给数据  /  info ： 打印的意思 /  res 表示 数据
                            console.info(res)  //   res.data==result  这里获得的 就是CheckItemController 中add 方法的true/false
                            /* 错误*/
                            if (res.data.flag) {
                                this.$message.success(res.data.message) //$message 表示调用Result 返回结果集 中的 message
                            } else {
                                this.$message.error(res.data.message)
                            }
                        })
                    } else {
                        // 这里调用的是 element 中的错误信息 样式提示
                        this.$message.error("数据不合法")
                        return false;
                    }
                    this.dialogFormVisible == false
                })
            },
            //分页查询    -->   调用分页查询  用于查询所有数据的方法
            findPage() {
                //无条件查询     ；  如果是有条件查询 则需要在get请求中 & 拼接 queryString属性 作为查询条件 (上面有定义过)
                //这个查询条件 对应的 就是  用户的 输入框
                //   pageNum   pageSize   @RequestBody {pageNum：xxx，pageSize：xxx} 使用json 对象的形式传入参数
                //  由于这里   pageNum   pageSize  属性已经 封装成了  pagination 对象，所以 直接传入 ：("/",this.pagination)  作为参数 传入 就可以了
                //    然后 使用 工具类 QueryPageBean 接收
                axios.post("/checkitem/findPage.do", this.pagination).then((res) => {
                    //res 包含两个部分  list<T> 返回的数据 和 total 总记录
                    // 所以可以将 这两个数据 封装成Map  作为res 返还回来
                    console.info(res)
                    if (res.data.flag) {
                        this.dataList = res.data.data.list;
                        this.pagination.total = res.data.data.total
                        this.$message.success(res.data.message)
                        /*    再查询功能中 这里设置查询的当前页 currentPage = 1 始终为1
                                    表示： 无论当前页 为第几页 数据都会从第一页 开始查询 避免查询不到数据的Bug       */
                       /* this.pagination.currentPage = 1*/
                        // 调用查询所有数据的 方法
                       // this.findPage()
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            // 重置表单
            resetForm() {
                //  将表单的内容清空
                this.formData = {}
            },
            // 弹出添加窗口
            handleCreate() {
                // 调用清除表单内容的方法 当点击取消时，清空表单的数据
                // 这样就实现了 再次打开表单时，内容被清空的 功能
                this.resetForm()
                // 当点击 将dialogFormVisible的属性
                this.dialogFormVisible = true;
            },
            // 编辑窗口       修改数据的回显
            handleUpdate(row) {
                //先把编辑的弹出窗口 设置为 true 点击之后就可以弹出窗口
                this.dialogFormVisible4Edit=true;
                //  因为vue <el-button> 标签 所以就可以将 当前 row 的数据遍历 赋值给表单数据
                this.formData=row;

                console.info(this.formData)


            },
            //分页查询的方法  括号里的 currentPage  代表当前页 是一个自定义的参数，名字可以随便取
            handleCurrentChange(currentPage) {
                // 表示：  自定义括号里的  currentPage 得到值 赋值给  pagination ： 分页中的 ， currentPage ：当前页
                this.pagination.currentPage = currentPage
                //  然后 再调用 findPage 方法查询所有数据
                this.findPage()
            },
            // 删除
            handleDelete(row) {
            //  弹窗确认框  --> MessageBox 弹框
                this.$confirm('您确定要删除吗？, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/checkitem/deleteCheckItemById.do?id="+row.id).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                            // 传入当前页为1
                            this.pagination.currentPage=1
                            // 然后执行查询所有的方法
                            this.findPage()//  删除成功  重新查询
                        }else{
                            this.$message.error(res.data.message)
                        }
          //  当 用户没有权限 删除 的时候 会出现403 异常，此时我们捕捉403 异常 给用户提示信息
                    }).catch((e)=>{
                        console.info(e)
                        if (e=='Error.Request failed with status code 403'){
                            this.$message.error("权限不足，请联系管理员！")
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 需要用到此方法时  每次都会从第一页开始查询
            findPageByCondition() {
                this.pagination.currentPage = 1
                //  调用分页查询  用于查询所有数据的方法
                this.findPage()
            }
        }
    })
</script>
</html>